var HomeProject = new Class({
	Implements: [Events, Options],

	options: {
		delayDuration: 2500
	},

	initialize: function(container, options){
		this.setOptions(options);

		this.container = container;
		this.devices = this.container.getElements('.device');
		this.slider = this.container.getElements('.project_slider')[0];
		this.sliderObject = null;

		this.build();
	},

	build: function(){
		this.devices.each(function(device, index){
			(function() {
				new HomeProjectDevice(device);
			}.bind(this)).delay(index*this.options.delayDuration);
		}.bind(this));

		this.sliderObject = new HomeProjectSlider(this.slider);
	}
});

var HomeProjectSlider= new Class({
	Implements: [Events, Options],

	options: {
		changeSlideDuration: 1200,
		intervalSlideDuration: 7000
	},

	initialize: function(container, options){
		this.setOptions(options);
		this.container = container;
		this.btnNext = this.container.getElements('.controls .next')[0];
		this.btnPrevious = this.container.getElements('.controls .previous')[0];
		this.divCurrent = this.container.getElements('.info .current')[0];
		this.running = false;

		this.items = this.container.getElements('.item');
		this.nbItems = this.items.length;

		if(this.nbItems < 2)
			return;

		this.currentItem = 0;
		this.build();
		this.enable();
	},

	build: function(){
		this.items.each(function(item){
			item.store('fx', new Fx.Morph(item, {
				link: 'cancel',
				duration: this.options.changeSlideDuration
			}));
		}.bind(this));

		this.btnNext.addEvent('click', function(e){
			e.stop();
			this.disable();
			this.next();
		}.bind(this));

		this.btnPrevious.addEvent('click', function(e){
			e.stop();
			this.disable();
			this.previous();
		}.bind(this));
	},

	next: function(){
		this.show((this.currentItem+1)%this.nbItems);
	},

	previous: function(){
		var index = this.currentItem-1;
		if(index < 0)
			index = this.nbItems-1;
		this.show(index);
	},

	show: function(index){
		if(this.running == true)
			return;
		this.running = true;

		var itemOld = this.items[this.currentItem];
		this.currentItem = index;
		this.divCurrent.set('text', this.currentItem+1);
		var itemNew = this.items[this.currentItem];

		itemNew.setStyles({
			'z-index' : 2,
			'left' : 0
		});

		itemNew.retrieve('fx').start({
			'width': itemNew.getElements('img')[0].getSize().x
		}).chain(function(){
				itemNew.setStyles({
					'z-index' : 1,
					'width' : '100%'
				});
				itemOld.setStyle('width', 0);
				this.running = false;
				this.enable();
		}.bind(this));
	},

	enable: function(){
		if(this.timer)
			return;
		this.timer = setInterval(function(){
			this.next();
		}.bind(this), this.options.intervalSlideDuration);
	},

	disable: function(){
		if(!this.timer)
			return;

		clearInterval(this.timer);
		this.timer = null;
	}
});

var HomeProjectDevice = new Class({
	Implements: [Events, Options],

	options: {
		slideDuration: 9000, // 5000
		fadeDuration: 500
	},

	initialize: function(device, options){
		this.setOptions(options);
		this.device = device;
		this.screens = this.device.getElements('.screens img');
		var deviceSize = this.device.getElement('.screens').measure(function(){
			return this.getDimensions();
		});

		this.deviceHeight = deviceSize.height;

		this.nbScreens = this.screens.length;
		if(this.nbScreens == 0)
			return;

		this.current = 0;
		this.build();
		this.enable();

		window.fireEvent('resize');
	},

	build: function(){
		this.screens.each(function(screen){
			screen.store('slide', new Fx.Morph(screen, {
				link: 'cancel',
				duration: isDesktop() ? this.options.slideDuration :  this.options.slideDuration/1.5
			}));
			screen.store('fade', new Fx.Morph(screen, {
				link: 'cancel',
				duration: this.options.fadeDuration
			}));
		}.bind(this));
	},

	enable: function(){
		var index = this.current;
		var screen = this.screens[index];

		var screenSize = screen.measure(function(){
			return this.getDimensions();
		});
		var screenHeight = screenSize.height;

		screen.retrieve('slide').start({
			'margin-top': isDesktop() ? this.deviceHeight-screenHeight : 0
		}).chain(function(){
			screen.retrieve('fade').start({
				'opacity': 0
			}).chain(function(){
				screen.setStyles({
					'display': 'none',
					'opacity' : 1,
					'margin' : 0
				});

				index = (index+1)%this.nbScreens;
				var newScreen = this.screens[index];
				newScreen.setStyles({
					'display': 'block',
					'opacity' : 0
				});

				newScreen.retrieve('fade').start({
					'opacity': 1
				}).chain(function(){
					this.current = index;
					this.enable();
				}.bind(this));
			}.bind(this));
		}.bind(this));
	}
});